<template>
	<view class="content">


		<!-- <view class="invi-empty">

		</view> -->

		<view class="invi-head">
			<view class="head-left" @click="goInvite">
				<text class="Stext">邀请粉丝数</text>
				<text class="Btext">{{infos.inviteNum || 0}}</text>
			</view>
			<view class="head-right">
				<text class="Stext">我的邀请人</text>
				<view class="right-box">
					<image class="box-image" :src="infos.inviteAvatar||''" mode=""></image>
					<text class="Ctext">{{infos.inviteName||''}}</text>
				</view>
			</view>
		</view>

		<view class="invi-title">
			<text class="invi-txt">邀请粉丝</text>
		</view>

		<view class="invi-list">
			<view class="list-ul" v-if="users&&users.length>0">
				<view class="ul-lis" v-for="item, index in users">
					<view class="lis-left">
						<image class="lis-image" :src="item.myInviteAvatar" mode=""></image>
					</view>
					<view class="lis-right">
						<text class="right-Otext">{{item.myInviteName}}</text>
						<text class="right-Stext">{{item.registrationTime}} 加入</text>
					</view>
				</view>
			</view>
			<view class="nullData" v-else>
				<image src="../../static/follow/follow1.png" mode="widthFix"></image>
				<view class="txt">
					您还没有粉丝哦~
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		inviNum,
		inviList,
		inviUser
	} from '../../api/apia';
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				type: 'arrow-left',
				form: {
					customerId: 2,
					id: 1
				},
				customerId: '',
				num: 0,
				list: [],
				users: [],
				infos:{}
			};
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
		},
		async mounted() {
			this.customerId = this.Info.id
			// await this.getInviteNum()
			// await this.getInviteList()
			await this.getInviteUser()
		},
		onLoad() {

		},
		methods: {
			goInvite(){
				uni.navigateTo({
					url: `/pages/friends/friends`
				})
			},
			back() {
				uni.navigateBack(0)
			},
			getInviteNum() {
				inviNum(this.customerId).then(res => {
					console.log(res);
					if (res.success) {
						this.num = res.result
					}
				})
			},
			getInviteList() {
				inviList({
					customerId: this.customerId
				}).then(res => {
					console.log(res);
					this.list = res.result
				})
			},
			getInviteUser() {
				inviUser({
					customerId: this.customerId
				}).then(res => {
					console.log(res);
					// this.users = res.result
					this.users =res.result.result
					this.infos = res.result.vo
				})
			}
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>

	.content {
		width: 100%;
		height: 100vh;
		// background: linear-gradient(to bottom, #ffe8ee, #f7f7f7 50%);
		padding: 30rpx;



		.invi-head {
			// background: linear-gradient(to bottom, #f22e0c, #f2760c);
			background-color: #373F54;
			padding: 40rpx 35rpx;
			display: flex;
			// margin: 30rpx;
			align-items: flex-start;
			justify-content: space-between;
			color: #fff;
			border-radius: 20rpx;

			.head-left {

				.Stext {
					display: block;
					font-size: 26rpx;
					color: #D3D5DA;
				}

				.Btext {
					display: block;
					font-size: 50rpx;
					margin-top: 25rpx;
					color: #FEDEB7;
				}
			}

			.head-right {
				width: 40%;

				.Stext {
					display: block;
					font-size: 26rpx;
					color: #D3D5DA;
				}

				.right-box {
					display: flex;
					align-items: center;
					align-items: center;
					margin-top: 20rpx;
					font-size: 26rpx;
					// display: block;
					color: #D3D5DA;

					.box-image {
						display: block;
						width: 55rpx;
						height: 55rpx;
						background-color: #a4adb3;
						border-radius: 50%;
						margin-right: 10rpx;
						border: 5rpx solid #fff;
						margin-top: 10rpx;
					}
				}
			}
		}

		.invi-title {
			padding: 30rpx 0 0 0;
			font-weight: 700;
			font-size: 30rpx;

			.invi-txt {
				position: relative;
				font-size: 29rpx;

				&::after {
					content: '';
					width: 35rpx;
					height: 7rpx;
					position: absolute;
					bottom: -15rpx;
					left: 0;
					right: 0;
					margin: auto;
					border-radius: 15rpx;
					background-color: #FE2C55;
				}
			}
		}

		.invi-list {
			padding: 20rpx 0;
			.list-ul {
				// margin-left: -80rpx;

				.ul-lis {
					display: flex;
					align-items: center;
					padding: 30rpx 25rpx;
					background-color: #fff;
					border-radius: 25rpx;
					margin: 20rpx 0 0 0;
					// list-style: none;

					.lis-left {
						.lis-image {
							width: 85rpx;
							height: 85rpx;
							border-radius: 50%;
							background-color: #ccc;
						}
					}

					.lis-right {
						margin-left: 25rpx;

						.right-Otext {
							display: block;
							font-size: 30rpx;
						}

						.right-Stext {
							margin-top: 10rpx;
							display: block;
							font-size: 25rpx;
							color: #7f7f7f;
						}
					}
				}
			}

			.nullData {
				width: 100%;
				margin-top: 300rpx;

				image {
					width: 35%;
					margin: 0 auto;
					display: block;
				}

				.txt {
					text-align: center;
					color: #8C8EA0;
					font-size: 30rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
